<template>
  <div id="map" ref="map">
    <div
      style="
        position: absolute;
        top: 34px;
        right: 70px;
        z-index: 999;
        background: white;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
      "
    >
      <div @click="addPoint">1.添加点</div>
      <div @click="addArea">2.1添加面并可修改</div>
      <div @click="cancelEditArea">2.2取消面的修改操作</div>
      <div @click="addLine">3.1添加线段并可修改</div>
      <div @click="cancelEditLine">3.2取消线段的修改操作</div>
      <div @click="clickFeature">选中对象</div>
    </div>

    <!-- 工具 -->
    <div class="toolBox" @click="clickBox">
      <img
        class="toolBoxIcon"
        :src="require('@/assets/icon/map/toolBox_selected.png')"
        alt
      />
      <div>工具箱</div>
    </div>

    <div v-show="checkedTool" class="tools">
      <div class="toolIcon" @click="measure('LineString')">
        <img
          class="toolBoxIcon"
          :src="require('@/assets/icon/map/measure_length_selected.png')"
          alt
        />
        <div>测距</div>
      </div>
      <div class="toolIcon" @click="measure('Polygon')">
        <img
          class="toolBoxIcon"
          :src="require('@/assets/icon/map/measure_area_selected.png')"
          alt
        />
        <div>测面</div>
      </div>
      <div class="toolIcon" @click="getLayer(0)">
        <img class="toolBoxIcon" src="@/assets/icon/map/layer.png" alt />
        <div :style="checkedLayer ? 'color:blue' : ''">图层</div>
      </div>
      <div class="toolIcon" @click="measure('Point')">
        <img
          class="toolBoxIcon"
          src="@/assets/icon/map/addPoint_selected.png"
          alt
        />
        <div>打点</div>
      </div>
    </div>

    <!-- 图层 -->
    <div v-show="checkedLayer" class="layerTools">
      <div @click="getLayer(1)">矢量图</div>
      <div @click="getLayer(2)">卫星图</div>
    </div>

    <!-- 弹出框 -->
    <div
      v-for="(item, index) in popupsData"
      :id="index + 'popup'"
      :ref="index + 'popup'"
      :key="index"
      class="ol-popup"
    >
      <div class="popupName">{{ item.name }}</div>
      <el-carousel
        v-if="item.url && item.url.length > 0"
        height="120px"
        :autoplay="false"
        indicator-position="none"
      >
        <el-carousel-item v-for="pic in item.url" :key="pic">
          <div>
            <el-image
              style="width: 100%; height: 100px"
              :src="pic"
              :preview-src-list="item.url"
              fit="scale-down"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import "@/assets/css/map.less";
import Overlay from "ol/Overlay";
//Map
import MyMap from "@/openlayers/map";

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      //默认经纬度
      center: [120.645728, 31.138525],

      //测试显示坐标点
      points: [
        [120.645728, 31.138525],
        [120.625728, 31.128525],
      ],
      //测试显示弹框
      PopPoints: [
        {
          name: "测试1",
          location: [120.645728, 31.138525],
          url: [
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huaban.com%2F718bee2fca08479a900af899e250ca3ca68f61f636e4f-upTnBi_fw658&refer=http%3A%2F%2Fhbimg.huaban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672559431&t=604a2fba0930b9c42e8e18577ee8ba62",
          ],
        },
        {
          name: "测试2",
          location: [120.625728, 31.128525],
          url: [
            "https://img0.baidu.com/it/u=2031224951,473007746&fm=253&fmt=auto&app=120&f=JPEG?w=761&h=401",
          ],
        },
      ],
      //测试显示面
      areas: [
        "MULTIPOLYGON(((120.65393038885519 31.16620344387386,120.65438126898248 31.166369276544252,120.65455286424022 31.166444180039043,120.65506255007226 31.166540937921205,120.65621583382945 31.166621205834026,120.65634457986216 31.166621205834026,120.65773403025109 31.16663213302771,120.65841531134087 31.16663749744574,120.65872101704936 31.166642663506146,120.65990125513513 31.166594582101503,120.66068446016747 31.166605310937562,120.66100632524926 31.16669650604407,120.66131209707696 31.16667504837195,120.66153740263421 31.166616039773622,120.66205238676507 31.166562395593324,120.66248683850625 31.166583654907818,120.66358124590356 31.166557031175294,120.66524957991082 31.16663213302771,120.6668159899755 31.16667504837195,120.66688036299186 31.166734056970277,120.66834484911399 31.166771607896486,120.66928898668725 31.166782336732545,120.66939627504784 31.166723328134218,120.66954647875268 31.166723328134218,120.66994881010491 31.166760879060426,120.67125772810418 31.166760879060426,120.67287241793113 31.166793065568605,120.67409550524192 31.166825252076784,120.6741813359304 31.166776972314516,120.67449783659416 31.166771607896486,120.67460512495475 31.166809158822694,120.6747767863317 31.166798429986635,120.67488943911033 31.166771607896486,120.67523276186424 31.166776972314516,120.6753346858068 31.166825252076784,120.67543660974937 31.166852074166933,120.67584966993766 31.166814523240724,120.67617153501946 31.166782336732545,120.67639684057671 31.166798429986635,120.67680453634698 31.166814523240724,120.67735707140405 31.166819887658754,120.67777549601037 31.166825252076784,120.67794179296929 31.16687353183905,120.67815100527245 31.166841345330873,120.67848896360833 31.16691108276526,120.67881619310815 31.166868167421022,120.67893957472283 31.166852074166933,120.67966913557487 31.1669539981095,120.68045234060722 31.166986184617677,120.68074201918083 31.167082744142213,120.6811872658773 31.167093472978273,120.68440880439317 31.167658522233737,120.68447138840865 31.166610239974474,120.68436829964979 31.16649782421933,120.6842985622154 31.166460273293122,120.68419127385481 31.16651928189145,120.68401424805982 31.166589019325837,120.68388550202711 31.166610476997956,120.68375139157637 31.166599748161897,120.68103163163526 31.16653537514554,120.67930965344769 31.16648173096524,120.677925633596 31.16648173096524,120.67551700990063 31.166460273293122,120.67543654363018 31.16651391747342,120.67421345631939 31.16651391747342,120.67404179494244 31.16647636654721,120.67400960843426 31.166428086784943,120.67282407204965 31.166417357948895,120.6703296176658 31.166352984932537,120.67005066792825 31.16628861191618,120.66956250588755 31.166095492867107,120.6691923610435 31.166202781227703,120.669101165937 31.16628861191618,120.6679317228065 31.16628324749815,120.66704659383159 31.16628324749815,120.66284625451426 31.16618668797361,120.6627328188585 31.166127971008677,120.6622776262031 31.166111586121193,120.66197185437541 31.16617595913755,120.66185383717875 31.166116950539223,120.66151051442485 31.166133043793316,120.66138176839213 31.166165230301495,120.65785198132852 31.166175959137554,120.65762131135324 31.166234967735882,120.65713781964845 31.1662347358816,120.65648405473092 31.166192052391644,120.65643041055063 31.166100857285137,120.6557223073707 31.16605257752287,120.65546481530527 31.166116950539227,120.65533070485453 31.166116950539227,120.65523414532998 31.166143772629376,120.65497128884653 31.166111586121197,120.6545689574943 31.16600966217863,120.6540934388557 31.16584177457645,120.65393038885519 31.16620344387386)))",
        "MULTIPOLYGON(((120.58737720475574 31.123363357569623,120.59038127885242 31.125079971339154,120.60377086625476 31.126024108912397,120.61497177110095 31.12739739992802,120.62046493516344 31.13014398195927,120.62810386643785 31.132976394678998,120.63188041673082 31.13366304018681,120.63424076066393 31.133062225367475,120.63926185593981 31.13396344759648,120.64488376603502 31.13593755343144,120.66042396151371 31.13962711231665,120.65992934278923 31.14054215695697,120.64604248032946 31.137267929102826,120.63917602525133 31.13516507723515,120.63325370774645 31.13396344759648,120.62956298814196 31.133791786219525,120.62582935319324 31.132847648646287,120.61750377641101 31.12954316713994,120.61467136369129 31.128169876124314,120.60398544297595 31.12675366976445,120.59351409898181 31.125981193568162,120.59016670213123 31.125723701502732,120.58664764390369 31.123878341700486,120.58737720475574 31.123363357569623)))",
      ],
      //测试移动视图到面
      geom: "MULTIPOLYGON(((120.65393038885519 31.16620344387386,120.65438126898248 31.166369276544252,120.65455286424022 31.166444180039043,120.65506255007226 31.166540937921205,120.65621583382945 31.166621205834026,120.65634457986216 31.166621205834026,120.65773403025109 31.16663213302771,120.65841531134087 31.16663749744574,120.65872101704936 31.166642663506146,120.65990125513513 31.166594582101503,120.66068446016747 31.166605310937562,120.66100632524926 31.16669650604407,120.66131209707696 31.16667504837195,120.66153740263421 31.166616039773622,120.66205238676507 31.166562395593324,120.66248683850625 31.166583654907818,120.66358124590356 31.166557031175294,120.66524957991082 31.16663213302771,120.6668159899755 31.16667504837195,120.66688036299186 31.166734056970277,120.66834484911399 31.166771607896486,120.66928898668725 31.166782336732545,120.66939627504784 31.166723328134218,120.66954647875268 31.166723328134218,120.66994881010491 31.166760879060426,120.67125772810418 31.166760879060426,120.67287241793113 31.166793065568605,120.67409550524192 31.166825252076784,120.6741813359304 31.166776972314516,120.67449783659416 31.166771607896486,120.67460512495475 31.166809158822694,120.6747767863317 31.166798429986635,120.67488943911033 31.166771607896486,120.67523276186424 31.166776972314516,120.6753346858068 31.166825252076784,120.67543660974937 31.166852074166933,120.67584966993766 31.166814523240724,120.67617153501946 31.166782336732545,120.67639684057671 31.166798429986635,120.67680453634698 31.166814523240724,120.67735707140405 31.166819887658754,120.67777549601037 31.166825252076784,120.67794179296929 31.16687353183905,120.67815100527245 31.166841345330873,120.67848896360833 31.16691108276526,120.67881619310815 31.166868167421022,120.67893957472283 31.166852074166933,120.67966913557487 31.1669539981095,120.68045234060722 31.166986184617677,120.68074201918083 31.167082744142213,120.6811872658773 31.167093472978273,120.68440880439317 31.167658522233737,120.68447138840865 31.166610239974474,120.68436829964979 31.16649782421933,120.6842985622154 31.166460273293122,120.68419127385481 31.16651928189145,120.68401424805982 31.166589019325837,120.68388550202711 31.166610476997956,120.68375139157637 31.166599748161897,120.68103163163526 31.16653537514554,120.67930965344769 31.16648173096524,120.677925633596 31.16648173096524,120.67551700990063 31.166460273293122,120.67543654363018 31.16651391747342,120.67421345631939 31.16651391747342,120.67404179494244 31.16647636654721,120.67400960843426 31.166428086784943,120.67282407204965 31.166417357948895,120.6703296176658 31.166352984932537,120.67005066792825 31.16628861191618,120.66956250588755 31.166095492867107,120.6691923610435 31.166202781227703,120.669101165937 31.16628861191618,120.6679317228065 31.16628324749815,120.66704659383159 31.16628324749815,120.66284625451426 31.16618668797361,120.6627328188585 31.166127971008677,120.6622776262031 31.166111586121193,120.66197185437541 31.16617595913755,120.66185383717875 31.166116950539223,120.66151051442485 31.166133043793316,120.66138176839213 31.166165230301495,120.65785198132852 31.166175959137554,120.65762131135324 31.166234967735882,120.65713781964845 31.1662347358816,120.65648405473092 31.166192052391644,120.65643041055063 31.166100857285137,120.6557223073707 31.16605257752287,120.65546481530527 31.166116950539227,120.65533070485453 31.166116950539227,120.65523414532998 31.166143772629376,120.65497128884653 31.166111586121197,120.6545689574943 31.16600966217863,120.6540934388557 31.16584177457645,120.65393038885519 31.16620344387386)))",

      //工具
      checkedTool: false, //工具箱开关
      checkedLayer: false, //图层选择
      //弹框数据
      popupsData: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initalMap("map");
  },

  methods: {
    //初始化地图
    initalMap(target) {
      //功能1创建地图
      this.myMap = new MyMap(target, this.center);

      // 功能2展示坐标点
      // this.myMap.showPoints(this.points);

      // 功能3展示面
      // this.myMap.showArea(this.areas);

      // 功能4移动视图
      // this.myMap.animateViewCenter([120.645728, 31]);
      // this.myMap.animateViewGeom(this.geom);

      // 功能5展示弹框
      // this.showPointsPop(this.PopPoints);

      //流动线
      // this.myMap.addMovingLine();

      // 风场
      this.myMap.addWindy();
    },

    clickBox() {
      this.checkedTool = !this.checkedTool;
      if (!this.checkedTool) {
        this.checkedLayer = false;
      }
    },
    //功能6测距、测面、打点
    measure(type) {
      this.checkedTool = false;
      this.checkedLayer = false;
      //type：测距、测面、打点
      this.myMap.measure(type);
    },
    //功能7图层切换
    getLayer(e) {
      if (e === 0) {
        this.checkedLayer = !this.checkedLayer;
        return;
      }
      this.checkedTool = false;
      this.checkedLayer = false;
      //矢量图
      if (e === 1) {
        this.myMap.map.getLayers().item(0).setVisible(true);
        this.myMap.map.getLayers().item(1).setVisible(false);
        this.myMap.map.getLayers().item(2).setVisible(true);
      }
      //卫星图
      if (e === 2) {
        this.myMap.map.getLayers().item(0).setVisible(false);
        this.myMap.map.getLayers().item(1).setVisible(true);
        this.myMap.map.getLayers().item(2).setVisible(false);
      }
    },
    //展示弹框
    showPointsPop(data) {
      //显示弹框
      this.initPopup(data);
      //显示点
      let points = [];
      data.forEach((i) => {
        points.push(i.location);
      });
      this.myMap.showPoints(points);
    },
    //展示点popup弹框
    initPopup(data) {
      this.popupsData = data;
      console.log(this.popupsData);
      this.$nextTick(() => {
        this.popupsData.forEach((p, index) => {
          //设置弹框popup
          let element = this.$refs[index + "popup"];
          let overlay = null;
          overlay = new Overlay({
            id: index,
            element: element[0],
            positioning: "center-center",
          });
          overlay.setPosition(p.location);
          this.myMap.map.addOverlay(overlay);
        });
      });
    },

    //功能8添加点
    addPoint() {
      this.myMap.addPoint();
    },
    //功能9添加面
    addArea() {
      this.myMap.addArea();
    },
    cancelEditArea() {
      this.myMap.cancelEditArea();
    },

    //功能10添加线段
    addLine() {
      this.myMap.addLine();
    },
    cancelEditLine() {
      this.myMap.cancelEditLine();
    },

    //选中编辑Feature
    clickFeature() {
      this.myMap.clickFeature();
    },
  },
};
</script>
<style lang="less" scoped>
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 150px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

.popupName {
  font-size: 12px;
}

.noPic {
  text-align: center;
  line-height: 80px;
}
</style>
